@icon-h: 20px;

.wea-edc-wrapper-com {
  .rating-img-container {
    line-height: 2.2;
  }
}

.wea-edc-form-rating {
  .rating-icon { 
    margin: 0 2px;

    &:first-child {
      margin-left: 0px;
    }
  }
}

.rating-img-container {
  & > span {
    display: inline-block;
    padding: 5px 3px;
    border: 1px solid #dfdfdf;
    cursor: pointer;

    &:not(:last-child) {
      border-right: none;
    }
    &.selected {
      background: #0270c1;
    }
    &:hover {
      opacity: .8;
      transition: all .2s ease;
    }
  }
}

.rating-icon {
  display: inline-block;
  vertical-align: middle;
  background-image: url(/edc/images/rating.png);
  width: @icon-h;
  height: @icon-h;
  background-size: 60px 320px;
  cursor: pointer;
}

.rating-icon-star {
  background-position: 0 -0px;
  &.highlight { background-position: -20px -0px;}
}

.rating-icon-heart {
  background-position: 0 -20px;
  &.highlight { background-position: -20px -20px;}
}

.rating-icon-sun {
  background-position: 0 -40px;
  &.highlight { background-position: -20px -40px;}
}

.rating-icon-tomato {
  background-position: 0 -60px;
  &.highlight { background-position: -20px -60px;}
}

.rating-icon-thumb {
  background-position: 0 -80px;
  &.highlight { background-position: -20px -80px;}
}

.rating-icon-shit {
  background-position: 0 -120px;
  &.highlight { background-position: -20px -120px;}
}

.rating-icon-rose {
  background-position: 0 -140px;
  &.highlight { background-position: -20px -140px;}
}

.rating-icon-happy {
  background-position: 0 -100px;
  &.highlight { background-position: -20px -100px;}
}